import { useState, useEffect } from 'react';
import { useTheme } from '@/hooks/useTheme';
import { Heart, BookOpen, Search, ArrowLeft, Filter, ChevronRight, MessageCircle, Bookmark, Share2 } from 'lucide-react';
import { useNavigate } from 'react-router-dom';
import { toast } from 'sonner';

// 定义哲学文章类型
interface PhilosophyArticle {
  id: string;
  title: string;
  category: string;
  author: string;
  authorAvatar: string;
  publishDate: string;
  readTime: string;
  likes: number;
  comments: number;
  content: string;
  keyPoints: string[];
  coverImage: string;
  isSaved: boolean;
  isLiked: boolean;
  philosophyCategory: '人生思考' | '社会观察' | '健康哲学';
}

// 哲学文章数据
const philosophyArticles: PhilosophyArticle[] = [
  {
    id: '15',
    title: '健身的本质是投资自己',
    category: '哲学',
    philosophyCategory: '人生思考',
    author: '哲思教练',
    authorAvatar: 'https://space.coze.cn/api/coze_space/gen_image?image_size=square&prompt=philosopher%20male%20avatar&sign=ccbf7cdea04dab8e9b94c8ea474d10cd',
    publishDate: '2025-10-01',
    readTime: '7分钟',
    likes: 876,
    comments: 42,
    content: '健身不仅仅是锻炼身体，更是对自我价值的投资。在这个快节奏的时代，健康的身体和强大的心灵是应对一切挑战的基础。通过健身，我们投资的是未来的健康、自信和生活质量。',
    keyPoints: [
      '健身是最有价值的自我投资方式之一',
      '健康是1，其他都是0',
      '身体是灵魂的容器，需要精心呵护',
      '自律带来自由，健身培养意志力',
      '长期坚持健身能带来复利效应'
    ],
    coverImage: 'https://space.coze.cn/api/coze_space/gen_image?image_size=landscape_16_9&prompt=fitness%20philosophy%20self-investment%20concept&sign=00d0d5ed7e0302fd5dec180f56d7ee02',
    isSaved: false,
    isLiked: false
  },
  {
    id: '16',
    title: '在未来的经济存量时代，健身保持完美形象是未来时代的必然趋势',
    category: '哲学',
    philosophyCategory: '社会观察',
    author: '趋势分析师',
    authorAvatar: 'https://space.coze.cn/api/coze_space/gen_image?image_size=square&prompt=economic%20analyst%20male%20avatar&sign=d794cd610d211b0bb0dd0ff6eab82734',
    publishDate: '2025-10-05',
    readTime: '9分钟',
    likes: 1043,
    comments: 67,
    content: '随着经济进入存量时代，个人形象和健康成为新的竞争优势。在资源有限的环境中，拥有健康的身体和良好的形象不仅能提高工作效率，还能增强个人魅力和竞争力，成为未来社会不可或缺的软实力。',
    keyPoints: [
      '存量时代，健康成为核心竞争力',
      '良好形象是个人品牌的重要组成部分',
      '健身是对抗年龄焦虑的有效方式',
      '健康身体提高工作效率和创造力',
      '健身投资回报率随时间递增'
    ],
    coverImage: 'https://space.coze.cn/api/coze_space/gen_image?image_size=landscape_16_9&prompt=future%20economic%20trend%20fitness%20importance&sign=820e5e057571600674bcf0730d9c0840',
    isSaved: false,
    isLiked: false
  },
  {
    id: '17',
    title: '身体与心灵的平衡：健身如何塑造现代人的精神世界',
    category: '哲学',
    philosophyCategory: '健康哲学',
    author: '心灵导师',
    authorAvatar: 'https://space.coze.cn/api/coze_space/gen_image?image_size=square&prompt=spiritual%20teacher%20female%20avatar&sign=b5e0edb21369235aa2f70564bf0f6df3',
    publishDate: '2025-10-10',
    readTime: '8分钟',
    likes: 752,
    comments: 43,
    content: '现代社会中，身体与心灵的分离导致了诸多心理问题。健身不仅是对身体的锻炼，更是心灵修炼的过程。通过身体的掌控，我们重新连接身心，找回内在平衡，培养专注力和意志力，这正是现代人最缺失的精神品质。',
    keyPoints: [
      '身心二元论的现代困境与突破',
      '健身作为冥想的动态形式',
      '意志力的肌肉训练原理',
      '身体记忆对心理状态的影响',
      '从掌控身体到掌控人生的哲学跃迁'
    ],
    coverImage: 'https://space.coze.cn/api/coze_space/gen_image?image_size=landscape_16_9&prompt=mind%20and%20body%20balance%20philosophy&sign=74b6bf2c542b3e0c355e29e5a84761e3',
    isSaved: false,
    isLiked: false
  },
  {
    id: '20',
    title: '健康资本：内卷时代的生存优势',
    category: '哲学',
    philosophyCategory: '社会观察',
    author: '社会观察家',
    authorAvatar: 'https://space.coze.cn/api/coze_space/gen_image?image_size=square&prompt=social%20commentator%20avatar&sign=89f414bf1ff7ffbe0bd7b821234d9c83',
    publishDate: '2025-10-22',
    readTime: '10分钟',
    likes: 932,
    comments: 78,
    content: '在社会内卷和充分竞争的时代，每个人都在经历着前所未有的消耗。当教育、职业、财富等传统优势逐渐同质化，身体健康正成为新时代的核心竞争力。保持强健的体魄不仅能提高工作效率，更能在心理和生理上建立起对抗压力的屏障，成为在激烈竞争中脱颖而出的关键资本。',
    keyPoints: [
      '健康是对抗内卷消耗的生理基础',
      '身体资本成为职场竞争的隐形优势',
      '健康体魄提升心理韧性和抗压能力',
      '长期健康投资带来的复利效应',
      '健康生活方式重塑个人竞争力维度'
    ],
    coverImage: 'https://space.coze.cn/api/coze_space/gen_image?image_size=landscape_16_9&prompt=health%20capital%20social%20competition%20concept&sign=acd76b2f4fcab57b26f429659f45d757',
    isSaved: false,
    isLiked: false
  },
  {
    id: '21',
    title: '极致专注力 苦练基本功才是真正的顶尖捷径',
    category: '哲学',
    philosophyCategory: '人生思考',
    author: '哲思教练',
    authorAvatar: 'https://space.coze.cn/api/coze_space/gen_image?image_size=square&prompt=philosopher%20male%20avatar&sign=ccbf7cdea04dab8e9b94c8ea474d10cd',
    publishDate: '2025-10-25',
    readTime: '9分钟',
    likes: 654,
    comments: 38,
    content: '在这个追求速成的时代，人们常常忽略了最基本的真理：真正的顶尖成就从来没有捷径。无论是健身还是任何领域，极致的专注力和扎实的基本功训练才是通往巅峰的唯一路径。专注力让我们深入事物本质，基本功则构建了不可动摇的基础，二者结合才能产生持久的卓越。',
    keyPoints: [
      '专注力是深度工作的核心，能创造心流状态和高质量成果',
      '基本功训练是构建专业能力的基石，决定了成就的上限',
      '慢即是快，扎实的基础比花哨的技巧更重要',
      '刻意练习需要专注和耐心，是从平凡到卓越的桥梁',
      '长期坚持专注力训练和基本功打磨，才能实现真正的蜕变'
    ],
    coverImage: 'https://space.coze.cn/api/coze_space/gen_image?image_size=landscape_16_9&prompt=focus%20and%20basic%20skills%20philosophy&sign=8358ad1513a3125616abf813ad2cf3bd',
    isSaved: false,
    isLiked: false
  }
];

export default function PhilosophyPage() {
  const { theme } = useTheme();
  const [articles, setArticles] = useState<PhilosophyArticle[]>(philosophyArticles);
  const [searchTerm, setSearchTerm] = useState('');
  const [activeCategory, setActiveCategory] = useState<string>('all');
  const [expandedArticle, setExpandedArticle] = useState<string | null>(null);
  const navigate = useNavigate();
  
  // 过滤文章
  const filteredArticles = articles.filter(article => {
    const matchesSearch = article.title.toLowerCase().includes(searchTerm.toLowerCase()) || 
                         article.content.toLowerCase().includes(searchTerm.toLowerCase());
    const matchesCategory = activeCategory === 'all' || article.philosophyCategory === activeCategory;
    return matchesSearch && matchesCategory;
  });
  
  // 处理点赞
  const handleLike = (id: string) => {
    setArticles(prev => 
      prev.map(article => 
        article.id === id 
          ? { 
              ...article, 
              isLiked: !article.isLiked,
              likes: article.isLiked ? article.likes - 1 : article.likes + 1
            } 
          : article
      )
    );
  };
  
  // 处理收藏
  const handleSave = (id: string) => {
    setArticles(prev => 
      prev.map(article => 
        article.id === id 
          ? { ...article, isSaved: !article.isSaved } 
          : article
      )
    );
    toast.success('收藏成功！');
  };
  
  // 切换文章展开/折叠
  const toggleArticleExpand = (id: string) => {
    setExpandedArticle(expandedArticle === id ? null : id);
  };

  return (
    <div className={`min-h-screen flex flex-col ${theme === 'dark' ? 'dark bg-slate-900 text-white' : 'bg-white text-slate-900'}`}>
      {/* 导航栏 */}
      <header className="sticky top-0 z-40 bg-white/90 dark:bg-slate-900/90 backdrop-blur-md shadow-md">
        <div className="container mx-auto px-4 py-4 flex items-center">
          <button 
            onClick={() => navigate(-1)} 
            className="mr-4 p-2 rounded-full hover:bg-slate-100 dark:hover:bg-slate-800 transition-colors"
          >
            <ArrowLeft size={20} />
          </button>
          <h1 className="text-xl font-bold bg-gradient-to-r from-purple-600 to-indigo-500 bg-clip-text text-transparent">
            健身哲学
          </h1>
        </div>
      </header>

      <main className="flex-grow">
        {/* 介绍区域 */}
        <section className="py-8 bg-gradient-to-br from-purple-50 via-indigo-50 to-slate-100 dark:from-purple-900/20 dark:via-indigo-900/20 dark:to-slate-800/50">
          <div className="container mx-auto px-4">
            <div className="max-w-3xl mx-auto text-center">
              <h2 className="text-2xl md:text-3xl font-bold mb-4">探索健身的哲学维度</h2>
              <p className="text-slate-600 dark:text-slate-300 mb-8">
                超越身体锻炼的表层意义，探索健身背后的人生智慧与哲学思考，
                理解身体与心灵、个人与社会、当下与永恒的深刻联系。
              </p>
              
              {/* 搜索和分类 */}
              <div className="flex flex-col md:flex-row gap-4 max-w-lg mx-auto">
                <div className="relative flex-grow">
                  <Search className="absolute left-3 top-1/2 transform -translate-y-1/2 text-slate-400" size={18} />
                  <input
                    type="text"
                    placeholder="搜索哲学文章..."
                    value={searchTerm}
                    onChange={(e) => setSearchTerm(e.target.value)}
                    className="w-full pl-10 pr-4 py-3 rounded-full bg-white dark:bg-slate-700 border border-slate-200 dark:border-slate-600 focus:outline-none focus:ring-2 focus:ring-purple-500 dark:focus:ring-purple-400"
                  />
                </div>
                <div className="relative">
                  <select
                    value={activeCategory}
                    onChange={(e) => setActiveCategory(e.target.value)}
                    className="w-full pl-4 pr-10 py-3 rounded-full bg-white dark:bg-slate-700 border border-slate-200 dark:border-slate-600 focus:outline-none focus:ring-2 focus:ring-purple-500 dark:focus:ring-purple-400 appearance-none"
                  >
                    <option value="all">全部分类</option>
                    <option value="人生思考">人生思考</option>
                    <option value="社会观察">社会观察</option>
                    <option value="健康哲学">健康哲学</option>
                  </select>
                  <div className="absolute right-3 top-1/2 transform -translate-y-1/2 pointer-events-none">
                    <ChevronRight size={16} className="text-slate-400" />
                  </div>
                </div>
              </div>
            </div>
          </div>
        </section>
        
        {/* 哲学文章列表 */}
        <section className="py-10">
          <div className="container mx-auto px-4">
            <div className="max-w-3xl mx-auto">
              {filteredArticles.length === 0 ? (
                <div className="text-center py-16">
                  <div className="w-20 h-20 mx-auto rounded-full bg-slate-100 dark:bg-slate-800 flex items-center justify-center mb-4">
                    <BookOpen size={32} className="text-slate-400" />
                  </div>
                  <h3 className="text-xl font-semibold mb-2">未找到相关文章</h3>
                  <p className="text-slate-500 dark:text-slate-400">
                    请尝试使用其他关键词或浏览所有分类
                  </p>
                </div>
              ) : (
                <div className="space-y-6">
                  {filteredArticles.map((article) => (
                    <div 
                      key={article.id}
                      className={`bg-white dark:bg-slate-800 rounded-2xl shadow-lg overflow-hidden transition-all duration-300 ${
                        expandedArticle === article.id ? 'ring-2 ring-purple-500 dark:ring-purple-400' : ''
                      }`}
                    >
                      <div 
                        className="cursor-pointer"
                        onClick={() => toggleArticleExpand(article.id)}
                      >
                        <div className="md:flex">
                          <div className="md:w-1/3">
                            <img 
                              src={article.coverImage} 
                              alt={article.title}
                              className="w-full h-48 object-cover"
                            />
                          </div>
                          <div className="p-6 md:w-2/3">
                            <div className="flex items-center mb-3">
                              <span className="px-3 py-1 bg-purple-100 dark:bg-purple-900/30 text-purple-600 dark:text-purple-400 text-xs font-medium rounded-full mb-2">
                                {article.philosophyCategory}
                              </span>
                            </div>
                            <h3 className="text-xl font-semibold mb-3">{article.title}</h3>
                            <p className="text-slate-600 dark:text-slate-300 mb-4 line-clamp-2">
                              {article.content}
                            </p>
                            <div className="flex items-center justify-between">
                              <div className="flex items-center text-sm text-slate-500 dark:text-slate-400">
                                <img 
                                  src={article.authorAvatar} 
                                  alt={article.author}
                                  className="w-6 h-6 rounded-full mr-2"
                                />
                                <span>{article.author}</span>
                                <span className="mx-2">•</span>
                                <span>{article.publishDate}</span>
                                <span className="mx-2">•</span>
                                <span>{article.readTime}</span>
                              </div>
                              <div className="flex items-center gap-4">
                                <button 
                                  onClick={(e) => {
                                    e.stopPropagation();
                                    handleLike(article.id);
                                  }}
                                  className="flex items-center text-slate-500 dark:text-slate-400 hover:text-red-500 transition-colors"
                                >
                                  <Heart size={18} className={article.isLiked ? "fill-red-500 text-red-500" : ""} />
                                  <span className="ml-1">{article.likes}</span>
                                </button>
                                <button 
                                  onClick={(e) => {
                                    e.stopPropagation();
                                    handleSave(article.id);
                                  }}
                                  className="flex items-center text-slate-500 dark:text-slate-400 hover:text-purple-500 transition-colors"
                                >
                                  <Bookmark size={18} className={article.isSaved ? "fill-purple-500 text-purple-500" : ""} />
                                </button>
                              </div>
                            </div>
                          </div>
                        </div>
                      </div>
                      
                      {/* 展开内容 */}
                      {expandedArticle === article.id && (
                        <div className="p-6 pt-0 border-t border-slate-200 dark:border-slate-700">
                          <h4 className="font-semibold mb-3 flex items-center">
                            <BookOpen size={18} className="mr-2 text-purple-600 dark:text-purple-400" />
                            核心观点
                          </h4>
                          <ul className="list-disc list-inside space-y-2 text-slate-600 dark:text-slate-300 mb-6">
                            {article.keyPoints.map((point, index) => (
                              <li key={index}>{point}</li>
                            ))}
                          </ul>
                          
                          <div className="bg-slate-50 dark:bg-slate-700/50 p-4 rounded-xl">
                            <h4 className="font-semibold mb-2">延伸思考</h4>
                            <p className="text-sm text-slate-600 dark:text-slate-300 italic">
                              健身不仅仅是身体的锻炼，更是一种生活哲学的实践。通过对身体的掌控，我们培养了自律与坚持的品质；通过克服挑战，我们建立了自信与韧性；通过规律的训练，我们懂得了量变引起质变的人生智慧。这些从健身中获得的品质，终将延伸到生活的方方面面，成为我们面对人生挑战的精神武器。
                            </p>
                          </div>
                          
                          <div className="mt-6 flex justify-between">
                            <button className="px-6 py-2 rounded-full bg-purple-600 text-white font-medium hover:bg-purple-700 transition-colors">
                              阅读完整文章
                            </button>
                            <div className="flex gap-3">
                              <button className="p-2 rounded-full bg-slate-100 dark:bg-slate-700 text-slate-600 dark:text-slate-300 hover:text-purple-600 dark:hover:text-purple-400 transition-colors">
                                <Share2 size={20} />
                              </button>
                              <button className="p-2 rounded-full bg-slate-100 dark:bg-slate-700 text-slate-600 dark:text-slate-300 hover:text-purple-600 dark:hover:text-purple-400 transition-colors">
                                <MessageCircle size={20} />
                              </button>
                            </div>
                          </div>
                        </div>
                      )}
                    </div>
                  ))}
                </div>
              )}
            </div>
          </div>
        </section>
        
        {/* 哲学思考卡片 */}
        <section className="py-12 bg-gradient-to-r from-purple-600 to-indigo-600 text-white">
          <div className="container mx-auto px-4">
            <div className="max-w-3xl mx-auto text-center">
              <h2 className="text-2xl font-bold mb-6">今日哲学思考</h2>
              <p className="text-xl italic mb-8">
                "身体是灵魂的最好居所，只有通过对身体的尊重与训练，我们才能真正触及灵魂的深度。"
              </p>
              <button className="px-6 py-3 bg-white text-purple-600 font-semibold rounded-full hover:bg-slate-100 transition-colors">
                探索更多哲学思想
              </button>
            </div>
          </div>
        </section>
      </main>

      {/* 页脚 */}
      <footer className="bg-slate-900 text-white py-6">
        <div className="container mx-auto px-4 text-center">
          <p className="text-slate-400 text-sm">
            © {new Date().getFullYear()} FitMaster 健身哲学 | 探索身体与心灵的平衡之道
          </p>
        </div>
      </footer>
    </div>
  );
}